замена картинки на другую

[gaga]

обыскал форум, не помогло. Я тут новенький и с трудом дохожу до каждого нового свойства, стиля и т.д. Вот уже 2 часа ломаю голову, пытаясь понять, как сделать, чтобы картинка-кнопка(ссылка) при наведении курсора менялась на другую, тех же размеров.

<a href="#"><img src="normal.gif"></a> - вот я ее нарисовал в html.

img:hover {

background-image:url(hover.gif); - задал стиль.

}

все работает, но hover'ная картинка появляется под нормальной, а надо наоборот))

намекните плз, как мне осуществить задуманное

[kalyaka-malyaka]

джаваскриптом можно.

например, так:

http://annet.dn.ua/faq/js/piconmouse.shtml

с пом. css можно. например, так:

<a class="button" href="#"><img src="1x1tr.gif" width="100" height="100" alt="" /></a>

a.button {
	width: 100px;
	height: 100px;
	background-image: url(button1.gif);
	background-position: top left;
	background-repeat: no-repeat;
	display: block;
}
a.button:hover {
	background-image: url(button2.gif);
}

1x1tr.gif - это прозрачная гифка 1*1 px, которой задаются размеры, нужные для кнопки.

хотя я в таких случаях предпочитаю делать картинку, склеенную из двух - обычная кнопка и кнопка при наведении. и класс тогда такой:

a.button {
	width: 100px;
	height: 100px;
	background-image: url(button1.gif);
	background-position: 0px 0px;
	background-repeat: no-repeat;
	display: block;
}
a.button:hover {
	background-position: 0px -100px;
}

в этом случае картинка целиком прогружается сразу, при наведении меняется прозиционирование, чтобы видимой становилась hover'ная часть. такой вот прелоад замороченный.

все работает, но hover'ная картинка появляется под нормальной, а надо наоборот))

так все правильно у вас получается - точнее, как делаете, так и получается картинка же никуда не девается. а при наведении добавляется background-image, который, естественно, появляется ПОД основной картинкой.

если вы будете все-таки делать с пом. css, то надо учитывать, что ie6 понимает псевдокласс hover только для <a>. если все-таки будете hover к <img> прикручивать, http://www.umade.ru/log/2004/07/css-hover-any-element/ тут описано, как заставить ie-шку это сделать.

Edited December 2, 2008 by kalyaka-malyaka

[NikuZ]

<a href="#"><img src="temp.gif" alt="" width="100" height="100" /></a>

a {
	background:url(temp_2.gif) 0 0 no-repeat;
}
a:hover img {
	visibility:hidden;
}

Свойство "visibility" скрывает элемент, но он продолжает занимать свое место не давая ссылке схлопнуться.

Edited December 2, 2008 by NikuZ

[gaga]

Огромное спасибо вам за помощь! Сделал)

здорово)) работает как я хотел) главное все предложенные варианты работают, единственное джаваскрипт не пробовал, ибо не знаю его пока)

Edited December 2, 2008 by gaga